<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.img1,.div1,.div2,.div3{
			float: right;
		}
		/*清理浮动*/
		.img1:after,.div1,.div2,.div3{
			content: "";
			height: 0;
			display: block;
			clear: both;
		}
		.button{
			background-color: gray;
		}
		.p1{
			color: brown;
			position: relative;
			top:10px;
		}
		.input1{
			width: 250px;
		}
		.div11{
			width: 290px;
			height: 430px;
			border: 1px dashed black;
			background-color: white;
		}
		.div11 p{
			position: relative;
			left:70px;
			line-height: 3px;

		}
		.div11>div{
			padding-bottom: 10px;
		}
		.div2{
			width: 502px;
			height: 624px;
			/*border: 1px dashed black;*/
			background-color: white;

			position: relative;
			right: 298px;
		}
		.img2{
			position: relative;
			left:80px;
		}

		.div2 a{
			color: brown;
		}
		.ul1{
			list-style: none;
		}
		.ul1>li{
			line-height: 30px;
			/*text-decoration: underline;*/
			position: relative;
			left:-30px;

		}
		.div3{
			width: 200px;
			height: 624px;
			background-color: white;
			/*border: 1px dashed black;*/

			position: relative;
			right: 801px;
			top:-624px;
		}
		.li1{
			font-size: 20px;
			color: brown;
		}
		.head{
			position: relative;
			left:-150px;
		}
		.head1{
			width: 100%;
			height: 1000px;
			background-color: gray;
		}
		.a1{
			text-decoration:none; 
			border-bottom:1px solid #ccc; /* #ccc换成链接的颜色 */
			display: inline-block; 
			padding-bottom:10px;  /*这里设置你要空的距离*/
		}
		
	</style>
</head>
<body>
	<div class="head1">
	<div class = "head">
	<div>
		<img src="blog1/MarthaBlog.jpg" alt="无法加载图片" class = "img1">
	</div>
	<div class = "div1">

		<p class="p1">SEARCH</p>
		
		<input type="text" class="input1">
		<button class = "button1">GO</button>

		<p class="p2">MOST RECENT POSTS</p>

		<div class="div11">
			<div class = "div111">
				<p class = "p111">Attending a Summer Dinner</p>
				<p class="p112">in East Hampton</p>
				<p class="p113">Jul 25,2018</p>
				<p class="p114">Read the Ofiginal</p>
			</div>
			<div class="div112">
				<p class = "p111">Attending a Summer Dinner</p>
				<p class="p112">in East Hampton</p>
				<p class="p113">Jul 25,2018</p>
				<p class="p114">Read the Ofiginal</p>
			</div>
			<div class="div113">
				<p class = "p111">Attending a Summer Dinner</p>
				<p class="p112">in East Hampton</p>
				<p class="p113">Jul 25,2018</p>
				<p class="p114">Read the Ofiginal</p>
			</div>
			<div class="div114">
				<p class = "p111">Attending a Summer Dinner</p>
				<p class="p112">in East Hampton</p>
				<p class="p113">Jul 25,2018</p>
				<p class="p114">Read the Ofiginal</p>
			</div>
		</div>

		<div class="div12">
			<p>MONTHLY ARCHIVES</p>
			<input type="text" class="input2" placeholder="See Posts From:"><select name="select1" id="" class="select1"></select>
		</div>

	</div>
	<div class="div2">
		<p>JULY 15,2018</p>
		<h2>Attending a Summer Dinner in East Hampton</h2>
		<p>it's always wonderful when i get to spend time in the Hamptons</p>
		<p>Recently,I visited Lily Pond,my home in East Hampton,New York,to check Out
			the gardens and to enjoy a peaceful weekend on Long Island with friends.
			while in the area.I also attended a preview dinner for 
			<a href="#">The Hampton Designer</a>Showhouse.this years Showhouse
			3rd with proceeds going to <a href="#">Southampton Hospital.</a>if you in or around the Hamptons this summer,I encourage you to visit 
			-<a href="#">just click on the highlighted link for more information</a></p>
		<p>here are some photos from the preview party-enjoy</p>
		<img src="blog1/house-300x200.jpg" alt="" class="img2">
		<p>the preview event was held at the home of Peter Wilson and Scott Sanders.Here I am
			with Scott,Peter ailey(Photo by Daniel Gonzalez for Business of home)</p>
	</div>
	<div class="div3">
		<ul class = "ul1">
			<li class = "li1"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li>
			<!-- <li class = "li2"><a href="#" class ="a1">CATEGORIES</a></li> -->
			<!-- <li class = "li2">seeds</li>
			<li class = "li2">Giving</li>
			<li class = "li2">Greenhouse</li>
			<li class = "li2">Greenhouse</li>
			<li class = "li2">Greenhouse</li> -->
		</ul>
	</div>
	</div>
	</div>
</body>
</html>